<template>
  <!-- 数据总览 -->
  <SectionContainer class="u-p30">
    <SectionTitle>数据总览
      <el-tooltip
        slot="tip"
        class="item"
        effect="dark"
        placement="top"
        content="数据更新时间2小时，当天数据仅供参考，请以隔天数据为准"
      >
        <i class="iconfont iconfont-10 c-hint-major"></i>
      </el-tooltip>
    </SectionTitle>
    <el-row type="flex">
      <el-col>
        <div class="c-text-high u-fs36 u-mb10">
          <AnimateNumber :number="overviewDataConsum"></AnimateNumber>
        </div>
        <div class="c-text-minor">当前消耗金额（元）</div>
      </el-col>
      <el-col>
        <div class="c-text-high u-fs36 u-mb10">
          <AnimateNumber :number="overviewDataEnableAccount"></AnimateNumber>
        </div>
        <div class="c-text-minor">当前推广账户数（启用中）</div>
      </el-col>
      <el-col>
        <div class="c-text-high u-fs36 u-mb10">
          <AnimateNumber :number="overviewDataTodayProfit"></AnimateNumber>
        </div>
        <div class="c-text-minor">今日盈利金额（元）</div>
        <Tip>此数据仅供参考，最终以财务对账为准</Tip>
      </el-col>
    </el-row>
  </SectionContainer>
</template>

<script>
import SectionTitle from "@/components/section-title";
import SectionContainer from "@/components/section-container";
import AnimateNumber from "@/components/animate-number";
import Tip from "@/components/tip";

import { fetchHomeOverviewData } from "@/api";

export default {
  components: {
    SectionTitle,
    SectionContainer,
    AnimateNumber,
    Tip
  },
  data() {
    return {
      overviewDataConsum: 0,
      overviewDataEnableAccount: 0,
      overviewDataTodayProfit: 0
    };
  },
  methods: {
    // 数据总览
    fetchHomeOverviewData() {
      fetchHomeOverviewData().then(res => {
        this.overviewDataConsum = res.data.adminConsum;
        this.overviewDataEnableAccount = res.data.enableAccount;
        this.overviewDataTodayProfit = res.data.todayProfit;
      });
    }
  },
  created() {
    this.fetchHomeOverviewData();
  }
};
</script>